<template>
	<div @click="show = false">
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 150px; width: 100%"></div>
		<div class="code m1280 f f-a-c f-j-b">
			<span>Javascript code</span>
			<div class="imgBox hand f f-a-c f-j-c">
				<img @click.stop="show = !show" src="/src/assets/geng.png" alt="" />
				<div v-show="show" class="rename">
					<div @click.stop="listVisible = true" class="topName">Rename</div>
					<div @click.stop="listVisibleDet = true" class="delete">Delete</div>
				</div>
			</div>
		</div>
		<div class="avart m1280 f f-a-c">
			<img src="/src/assets/tou.png" alt="" />
			<div class="nameBox">
				<div class="name">Jane Florence</div>
				<div class="time">Aug 15, 2023 36 articles</div>
			</div>
		</div>
		<div class="box m1280">
			<div v-for="(item, index) in 6" @click="goTextDetils(item)" :key="index" class="hand item f f-a-c f-j-b">
				<div class="lef">
					<div class="topAva f f-a-c">
						<img src="/src/assets/tou.png" alt="" />
						<div class="f f-a-c">
							<div class="name">Olivia Martinez</div>
							<div class="time">Aug 5, 2023</div>
						</div>
					</div>
					<div class="title">Writing an Article for your Data Analysis Project</div>
					<div class="count">
						Are you a data professional with a groundbrea king project that deserves to be shared with the world? Do you want to write an article that will captivate your audience and showcase your
						expertise?
					</div>
					<div class="bot f f-a-c f-j-b">
						<div class="tagsLef f f-a-c">
							<div class="data">Data analytics</div>
							<div class="data">Data</div>
						</div>
						<div class="rigIcon f f-a-c">
							<img class="img1" src="/src/assets/page/1.png" alt="" />
							<img class="img1" src="/src/assets/page/6.png" alt="" />
						</div>
					</div>
				</div>
				<div class="shoopImg"><img src="/src/assets/tou.png" alt="" /></div>
			</div>
			<div style="margin-bottom: 60px; margin-top: 60px" class="hand">
				<div class="example-pagination-block f f -a-c f-j-c">
					<el-pagination @size-change="sizeChange" @current-change="currentChange" layout="prev, pager, next" :total="1000" />
				</div>
			</div>
		</div>
		<!-- 下面的列表 -->
		<div class="people m1280">People also view</div>
		<div class="peopleBox m1280 f f-a-c f-w-w">
			<div v-for="(item, index) in 4" :key="index" class="peopItem">
				<div class="topImg">
					<img src="/src/assets/tou.png" alt="" />
				</div>
				<div class="avart f f-a-c f-j-b">
					<div class="ava f f-a-c">
						<img src="/src/assets/tou.png" alt="" />
						<div class="name">Charles Taylor</div>
					</div>
					<div class="time">3 min read</div>
				</div>
				<div class="title">The Ultimate Data Analytics Roadmap: A FIVE-Level Framework</div>
				<div class="counts">Data analytics is a field that has seen massive growth in the past few years. The popularity and the demand for it have grown ex...</div>
				<div class="bot f f-a-c f-j-b">
					<div class="tagsLef f f-a-c">
						<div class="data">Data analytics</div>
						<div class="data">Data</div>
					</div>
					<div class="rigIcon f f-a-c">
						<img class="img1" src="/src/assets/page/1.png" alt="" />
						<img class="img1" src="/src/assets/page/6.png" alt="" />
					</div>
				</div>
			</div>
		</div>
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ref, onMounted } from "vue";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	let statusTab = ref(1);
	let show = ref(false);
	let listVisible = ref(false);
	let listVisibleDet = ref(false);
	onMounted(() => {
		window.addEventListener("scroll", handleScroll);
	});
	// 切换分页
	const sizeChange = e => {
		console.log(e, "1111111");
	};
	// 切换分页
	const currentChange = e => {
		console.log(e, "1111111");
	};
	const goTextDetils = item => {
		router.push({
			path: "/BuyClubDetils"
		});
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
